@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {

    /* 头部图标*/
    .header_icon {
        @apply hover:bg-[var(--hoverBg)] cursor-pointer py-2 px-2 mx-1 rounded-full m-2 before:text-base text-[var(--text)]
    }

    /* 左侧菜单 */
    .listStyle {
        @apply w-52 transition-all h-11 rounded-r-3xl text-[var(--text)] mb-1 pl-4 hover:cursor-pointer hover:bg-[var(--hoverBg)] flex justify-start items-center
    }

    /* 中间区域导航栏 */
    .conNav {
        @apply hover:bg-[var(--active)] transition-all hover:cursor-pointer rounded-full px-3 py-2 m-1 text-[var(--text)] text-base
    }

    .cardTitle {
        @apply text-2xl text-[var(--text)] my-5
    }

    .cardList {
        @apply p-4 rounded-lg flex flex-col justify-evenly items-center group/item hover:bg-slate-600 bg-gray-800 hover:cursor-pointer duration-300 w-[calc(100%/5-10px)] h-72 mb-3 mr-3 five-margin
    }
}

img {
    -webkit-user-drag: none;
    /* 禁止图片拖拽 */
}

.left_menu {
    background: var(--bg);
    color: var(--text);
}

.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.no-scrollbar::-webkit-scrollbar {
    display: none;
}

.loader {
    position: relative;
    width: 78px;
    height: 78px;
    border-radius: 50%;
    box-sizing: border-box;
    background: #fff;
    border: 8px solid #131a1d;
    overflow: hidden;
    box-sizing: border-box;
}

.loader::after {
    content: '';
    position: absolute;
    left: 0;
    top: -50%;
    width: 100%;
    height: 100%;
    background: #263238;
    z-index: 5;
    border-bottom: 8px solid #131a1d;
    box-sizing: border-box;
    animation: eyeShade 3s infinite;
}

.loader::before {
    content: '';
    position: absolute;
    left: 20px;
    bottom: 15px;
    width: 32px;
    z-index: 2;
    height: 32px;
    background: #111;
    border-radius: 50%;
    animation: eyeMove 3s infinite;
}

@keyframes eyeShade {
    0% {
        transform: translateY(0)
    }

    20% {
        transform: translateY(5px)
    }

    40%,
    50% {
        transform: translateY(-5px)
    }

    60% {
        transform: translateY(-8px)
    }

    75% {
        transform: translateY(5px)
    }

    100% {
        transform: translateY(10px)
    }
}

@keyframes eyeMove {
    0% {
        transform: translate(0, 0)
    }

    20% {
        transform: translate(0px, 5px)
    }

    40%,
    50% {
        transform: translate(0px, -5px)
    }

    60% {
        transform: translate(-10px, -5px)
    }

    75% {
        transform: translate(-20px, 5px)
    }

    100% {
        transform: translate(0, 10px)
    }
}

.loadingText {
    color: var(--text);
    display: inline-block;
    position: relative;
    font-size: 48px;
    font-family: Arial, Helvetica, sans-serif;
    box-sizing: border-box;
}

.loadingText::after {
    content: '';
    width: 5px;
    height: 5px;
    background: currentColor;
    position: absolute;
    bottom: 30%;
    right: -10px;
    box-sizing: border-box;
    animation: animloader 1s linear infinite;
}

@keyframes animloader {
    0% {
        box-shadow: 10px 0 rgba(255, 255, 255, 0), 20px 0 rgba(255, 255, 255, 0);
    }

    50% {
        box-shadow: 10px 0 white, 20px 0 rgba(255, 255, 255, 0);
    }

    100% {
        box-shadow: 10px 0 white, 20px 0 white;
    }
}

.customizedScrollbar::-webkit-scrollbar {
    width: .3rem;
}

.customizedScrollbar::-webkit-scrollbar-track {
    background-color: transparent;
}

.customizedScrollbar::-webkit-scrollbar-thumb {
    background-color: var(--playBg);
    border-radius: 5px;
}
.active {
    background-color: var(--active);
    font-weight: bold;
}